<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="楼层" prop="floorInput">
            <el-input v-model="formData.floorInput" placeholder="请输入楼层" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="面积" prop="houseAreaInput">
            <el-input v-model="formData.houseAreaInput" placeholder="请输入面积" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所在区域" prop="areaInput">
            <el-select v-model="formData.areaInput" placeholder="请选择所在区域" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in areaInputOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址" prop="addressInput">
            <el-select v-model="formData.addressInput" placeholder="请选择地址" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in addressInputOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房屋走向" prop="directionInput">
            <el-select v-model="formData.directionInput" placeholder="请选择房屋走向" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in directionInputOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房型" prop="houseTypeInput">
            <el-select v-model="formData.houseTypeInput" placeholder="请选择房型" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in houseTypeInputOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="环境资源" prop="surroundingInput">
            <el-select v-model="formData.surroundingInput" placeholder="请选择环境资源" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in surroundingInputOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">-->
<!--          <el-form-item label="点击估价" prop="appraisalButton">-->
<!--            <el-button type="primary" icon="el-icon-search" size="medium"> 主要按钮 </el-button>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary " @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房屋估价" prop="output">
            <el-input v-model="formData.output" placeholder="估价会从这里输出" readonly clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        floorInput: undefined,
        houseAreaInput: undefined,
        areaInput: undefined,
        addressInput: undefined,
        directionInput: undefined,
        houseTypeInput: undefined,
        surroundingInput: undefined,
        appraisalButton: undefined,
        output: undefined,
      },
      rules: {
        floorInput: [{
          required: true,
          message: '请输入楼层',
          trigger: 'blur'
        }],
        houseAreaInput: [{
          required: true,
          message: '请输入面积',
          trigger: 'blur'
        }],
        areaInput: [{
          required: true,
          message: '请选择所在区域',
          trigger: 'change'
        }],
        addressInput: [{
          required: true,
          message: '请选择地址',
          trigger: 'change'
        }],
        directionInput: [{
          required: true,
          message: '请选择房屋走向',
          trigger: 'change'
        }],
        houseTypeInput: [{
          required: true,
          message: '请选择房型',
          trigger: 'change'
        }],
        surroundingInput: [{
          required: true,
          message: '请选择环境资源',
          trigger: 'change'
        }],
        output: [],
      },
      areaInputOptions: [{
        "label": "曲江",
        "value": "曲江"
      }, {
        "label": "未央",
        "value": "未央"
      }, {
        "label": "浐灞",
        "value": "浐灞"
      }, {
        "label": "灞桥",
        "value": "灞桥"
      }, {
        "label": "碑林",
        "value": "碑林"
      }, {
        "label": "经开",
        "value": "经开"
      }, {
        "label": "莲湖",
        "value": "莲湖"
      }, {
        "label": "长安",
        "value": "长安"
      }, {
        "label": "雁塔",
        "value": "雁塔"
      }, {
        "label": "高新",
        "value": "高新"
      }],
      addressInputOptions: [{
        "label": "曲江CCBD",
        "value": "曲江CCBD"
      }, {
        "label": "三桥",
        "value": "三桥"
      }, {
        "label": "三森",
        "value": "三森"
      }, {
        "label": "凤城五路",
        "value": "凤城五路"
      }, {
        "label": "八府庄",
        "value": "八府庄"
      }, {
        "label": "劳动公园",
        "value": "劳动公园"
      }, {
        "label": "兴庆公园",
        "value": "兴庆公园"
      }, {
        "label": "北大明宫",
        "value": "北大明宫"
      }, {
        "label": "北辰立交",
        "value": "北辰立交"
      }, {
        "label": "吉祥村",
        "value": "吉祥村"
      }, {
        "label": "国际港务区",
        "value": "国际港务区"
      }, {
        "label": "大明宫",
        "value": "大明宫"
      }, {
        "label": "太华路",
        "value": "太华路"
      }, {
        "label": "市行政中心",
        "value": "市行政中心"
      }, {
        "label": "市图书馆",
        "value": "市图书馆"
      }, {
        "label": "未央湖",
        "value": "未央湖"
      }, {
        "label": "百花村",
        "value": "百花村"
      }, {
        "label": "科技六路",
        "value": "科技六路"
      }, {
        "label": "省人民医院",
        "value": "省人民医院"
      }, {
        "label": "电视塔",
        "value": "电视塔"
      }, {
        "label": "航天大道",
        "value": "航天大道"
      }, {
        "label": "西安交大",
        "value": "西安交大"
      }, {
        "label": "高新一中",
        "value": "高新一中"
      }, {
        "label": "高新四路",
        "value": "高新四路"
      }, {
        "label": "龙首原",
        "value": "龙首原"
      }, {
        "label": "电视塔",
        "value": "电视塔"
      }],
      directionInputOptions: [{
        "label": "南向",
        "value": "南向"
      }, {
        "label": "东向",
        "value": "东向"
      }, {
        "label": "北向",
        "value": "北向"
      }, {
        "label": "西向",
        "value": "西向"
      }, {
        "label": "东北向",
        "value": "东北向"
      }, {
        "label": "东南向",
        "value": "东南向"
      }, {
        "label": "东西向",
        "value": "东西向"
      }, {
        "label": "南北向",
        "value": "南北向"
      }, {
        "label": "西北向",
        "value": "西北向"
      }, {
        "label": "西南向",
        "value": "西南向"
      }],
      houseTypeInputOptions: [{
        "label": "3室2厅",
        "value": "3室2厅"
      }, {
        "label": "1室0厅",
        "value": "1室0厅"
      }, {
        "label": "1室1厅",
        "value": "1室1厅"
      }, {
        "label": "2室0厅",
        "value": "2室0厅"
      }, {
        "label": "2室1厅",
        "value": "2室1厅"
      }, {
        "label": "2室2厅",
        "value": "2室2厅"
      }, {
        "label": "3室1厅",
        "value": "3室1厅"
      }, {
        "label": "3室2厅",
        "value": "3室2厅"
      }, {
        "label": "3室3厅",
        "value": "3室3厅"
      }, {
        "label": "3室4厅",
        "value": "3室4厅"
      }, {
        "label": "4室1厅",
        "value": "4室1厅"
      }, {
        "label": "4室2厅",
        "value": "4室2厅"
      }, {
        "label": "4室3厅",
        "value": "4室3厅"
      }, {
        "label": "4室5厅",
        "value": "4室5厅"
      }, {
        "label": "5室2厅",
        "value": "5室2厅"
      }, {
        "label": "5室3厅",
        "value": "5室3厅"
      }, {
        "label": "5室4厅",
        "value": "5室4厅"
      }, {
        "label": "6室1厅",
        "value": "6室1厅"
      }, {
        "label": "6室2厅",
        "value": "6室2厅"
      }, {
        "label": "6室3厅",
        "value": "6室3厅"
      }, {
        "label": "6室4厅",
        "value": "6室4厅"
      }, {
        "label": "6室6厅",
        "value": "6室6厅"
      }, {
        "label": "7室2厅",
        "value": "7室2厅"
      }, {
        "label": "7室3厅",
        "value": "7室3厅"
      }],
      surroundingInputOptions: [{
        "label": "交通好;商业好",
        "value": "交通好;商业好"
      }, {
        "label": "交通好",
        "value": "交通好"
      }, {
        "label": "医疗好",
        "value": "医疗好"
      }, {
        "label": "商业好",
        "value": "商业好"
      }, {
        "label": "环境好",
        "value": "环境好"
      }, {
        "label": "未知",
        "value": "未知"
      }, {
        "label": "交通好;医疗好",
        "value": "交通好;医疗好"
      }, {
        "label": "交通好;医疗好;商业好",
        "value": "交通好;医疗好;商业好"
      }, {
        "label": "交通好;医疗好;环境好",
        "value": "交通好;医疗好;环境好"
      }, {
        "label": "交通好;教育好",
        "value": "交通好;教育好"
      }, {
        "label": "交通好;商业好;环境好",
        "value": "交通好;商业好;环境好"
      }, {
        "label": "交通好;教育好;环境好",
        "value": "交通好;教育好;环境好"
      }, {
        "label": "交通好;环境好",
        "value": "交通好;环境好"
      }, {
        "label": "医疗好;商业好",
        "value": "医疗好;商业好"
      }, {
        "label": "医疗好;商业好;环境好",
        "value": "医疗好;商业好;环境好"
      }, {
        "label": "医疗好;教育好",
        "value": "医疗好;教育好"
      }, {
        "label": "医疗好;环境好",
        "value": "医疗好;环境好"
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(async (valid) => {
        if (!valid) return
        // TODO 提交表单


        try {
          // 构造请求参数（与后端API要求的格式一致）
          const requestData = {
            numeric_features: {
              floor: Number(this.formData.floorInput),
              house_area: Number(this.formData.houseAreaInput)
            },
            categorical_features: {
              address: this.formData.addressInput,
              area: this.formData.areaInput,
              direction: this.formData.directionInput,
              house_type: this.formData.houseTypeInput,
              surrounding: this.formData.surroundingInput
            }
          }

          // 调用后端预测接口
          const response = await axios.post('http://127.0.0.1:8000/predict/house_price', requestData,{ withCredentials: true,    headers: {
              'Content-Type': 'application/json'
            } })
          // 显示预测结果（保留2位小数）
          this.formData.output = response.data.predicted_house_price + ' 万元'
        } catch (error) {
          // 错误处理
          this.$message.error('预测失败：' + (error.response?.data?.detail || error.message))
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
